<template>
  <div class="page-2-container">
    <div class="top-left--wrap">
      <img class="en-name-pic" :src="enNamePic" />
      <img class="name-pic" :src="namePic" />
      <img class="line-pic" :src="linePic" />
    </div>
    <div class="top-right--wrap" >
      <img class="square-bg" :src="squareBg" />
    </div>
    <div class="carousel--wrap" >
      <carousel-3d autoplay display="6" width="250" height="210" disable3d="true" :animationSpeed="1000">
        <slide :index="index" v-for="(item, index) in slideList " :key=index>
          <img class="slideshow-pic" :src="item" />
        </slide>
      </carousel-3d>
    </div>
    <div class="content--wrap">毛豆城是一家集育、学、玩为一体、拥有4000平独栋教学楼、全场景沉浸式培训机构。旗下有阅读教育类、艺术素养类、体能训练类等课程能全方位提升孩子在未来的国际竞争力;且能够结合孩子阅读兴趣提供个性化选书、借阅以及阅读力培训，能全方位提升孩子阅读效率同时为帮助家长把孩子培养成智商、情商、德商逆商、财商“五商”俱全的高素质综合性人才开设了对标国际领先水平。的全素养类课程体系,立足国内,放眼全球。</div>
    <div class="bottom-left--wrap">
      <img class="square-bg" :src="squareBg" />
    </div>
    <div class="bottom-right--wrap">
      <img class="square-bg" :src="bottomPic" />
    </div>
  </div>
</template>

<script setup>
  import squareBg from '../assets/image/square_bg.png'
  import namePic from '../assets/image/page_2/name.png'
  import linePic from '../assets/image/page_2/line.png'
  import enNamePic from '../assets/image/page_2/en_name.png'
  import bottomPic from '../assets/image/page_2/b_r_pic.png'
  import slideshow_1 from '../assets/image/page_2/slideshow_1.png'
  import slideshow_2 from '../assets/image/page_2/slideshow_2.png'
  import slideshow_3 from '../assets/image/page_2/slideshow_3.png'

  import { ref } from 'vue'

const slideList = ref([slideshow_1, slideshow_2, slideshow_3, slideshow_1, slideshow_2, slideshow_3])

</script>

<style lang="less" scoped>

@import "../assets/css/animation.less";


.page-2-container {
  position: relative;
  width: 100%;
  height: 100%;

  .square-bg {
    width: 140vw;
    height: 140vw;
  }

  .top-right--wrap {
    position: absolute;
    top: -42vw;
    right: -92vw;
    transform: rotate(7deg);
    z-index: 99;
    animation: anRight_112 1s ease;
  }

  .top-left--wrap {
    position: absolute;
    width: 63vw;
    height: 16vw;
    top: 9vw;
    left: 6vw;
    animation: titleEnter 1s ease;
    .name-pic {
      display: block;
      width: 29vw;
      height: 6vw;
      margin-bottom: 3vw;
    }
    .en-name-pic {
      display: block;
      width: 42vw;
      height: 3vw;
      margin-bottom: 3vw;
    }
    .line-pic {
      display: block;
      width: 100%;
      height: 1vw;
    }
  }
  .carousel--wrap {
    position: absolute;
    width: 80vw;
    height: 56vw;
    background: #000;
    top: 37vw;
    left: 6vw;
    animation: hideShow 1s ease;
    .slideshow-pic {
      width: 67vw;
      height: 56vw;
    }
  }
  .content--wrap {
    position: absolute;
    width: 79vw;
    height: 54vw;
    line-height: 22px;
    font-size: 14px;
    color: #232222;
    bottom: 26vw;
    left: 6vw;
    z-index: 99;
    animation: hideShow 1.5s ease;
  }
  .bottom-left--wrap {
    position: absolute;
    width: 10vw;
    height: 10vw;
    bottom: 10vw;
    left: -61vw;
    z-index: 9;
    transform: rotate(-4deg);
    animation: anBottom_10 1s ease;
  }
  .bottom-right--wrap {
    position: absolute;
    width: 10vw;
    height: 10vw;
    bottom: 28vw;
    right: 63vw;
    animation: anIncline_28 2s ease;
  }
  .carousel-3d-container {
    margin-top: 0 !important;
  }
}
</style>
